<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--引入bootstrap样式文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--引入首页样式文件index.css-->
    <link rel="stylesheet" href="css/index.css">
    <title>百度新闻</title>
</head>

<body>
    <!--顶部栏 小屏幕和超小屏幕时隐藏-->
    <nav class="navbar navbar-default hidden-sm hidden-xs">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="images/brand.png" alt="">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">新闻<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">网页</a></li>
                    <li><a href="#">贴吧</a></li>
                    <li><a href="#">百科</a></li>
                    <li><a href="#">知道</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">地图</a></li>
                    <li><a href="#">文库</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入您要查询的内容">
                    </div>
                    <button type="submit" class="btn btn-default">
                        <div class="glyphicon glyphicon-search"></div>
                    </button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div class="row">
            <header class="col-md-2">
                <div class="logo">
                    <a href="#">
                        <!--若进入超小屏幕，则logo图片将隐藏 用text显示内容-->
                        <img src="images/logo_news.png" alt="" class="hidden-xs">
                        <!--事先准备一个盒子 在logo中，平时隐藏，只有在超小屏幕下才显示-->
                        <span class="visible-xs">百度新闻</span>
                    </a>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                        <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
                        <li><a href="#" class="glyphicon glyphicon-globe">奇趣事</a></li>
                        <li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
                    </ul>
                </div>
            </header>
            <article class="col-md-7">
                <!--新闻模块-->
                <div class="news clearfix">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="upload/news_1.jpg" alt="">
                                <p>长城秋色展画卷 霜叶红于二月花</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="upload/news_2.jpg" alt="">
                                <p>纽约启动2020美国大选提前投票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="upload/news_3.jpg" alt="">
                                <p>德国新冠死亡人数已超万例</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="upload/news_4.jpg" alt="">
                                <p>稻花香里说丰年 “浙里”满目皆是金黄</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="upload/news_5.jpg" alt="">
                                <p>新疆博湖：芦花绽放满眼秋 “蒹葭秋雪”醉美景</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--发表模块-->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>中华民族是英雄辈出的民族 习近平这样谈英雄</h3>
                            <!--超小屏幕下介绍将隐藏-->
                            <p class="text-muted hidden-xs">2020年10月24日16:20 &nbsp; 来源:人民网-时政频道</p>
                            <p class="text-muted hidden-xs">
                                10月23日，纪念中国人民志愿军抗美援朝出国作战70周年大会在北京人民大会堂隆重举行。中国中央总书记、国家主席、中央军委主席习近平主席大会并发表重要讲话</p>
                            <p class="text-muted">来源：人民日报、新华社</p>
                            <p class="text-muted hidden-xs">责任编辑：宋子节、马昌</p>
                        </div>
                        <!--超小屏幕下图片将隐藏-->
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/pub_1.png" alt="">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-9">
                            <h3>人民领袖丨重阳节，感受习近平这份别样牵挂</h3>
                            <p class="text-muted hidden-xs">2020年10月25日 08:52 &nbsp; 来源:央视网</p>
                            <p class="text-muted hidden-xs">
                                2017年11月17日，人民大会堂金色大厅，习近平总书记亲切会见参加全国精神文明建设表彰大会的600多名代表。</p>
                            <p class="text-muted">来源：中央广播电视总台央视网 </p>
                            <p class="text-muted hidden-xs">编辑：钱景童 &nbsp; 责任编辑：刘亮</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/pub_2.png" alt="">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-9">
                            <h3>中国和联合国儿基会为柬埔寨幼儿园捐赠物资（患难见真情 共同抗疫情）</h3>
                            <p class="text-muted hidden-xs">2020-10-25 00:00 &nbsp; 来源:人民日报</p>
                            <p class="text-muted hidden-xs">本报曼谷10月24日电
                                （记者赵益普）近日，由中国政府和联合国儿童基金会捐赠的一批卫生和学习用品陆续抵达柬埔寨各地的社区幼儿园。</p>
                            <p class="text-muted">来源：人民日报、联合国儿童基金会网站 </p>
                            <p class="text-muted hidden-xs">记者：赵益普&nbsp;责任编辑：马昌</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/pub_3.jpg" alt="">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-9">
                            <h3>中国人口老龄化快速发展 用互联网思维应对“银色挑战”</h3>
                            <p class="text-muted hidden-xs">2020-10-25 08:26 </p>
                            <p class="text-muted hidden-xs">
                                当前，我国正处于人口老龄化快速发展时期，“银发族”的阵容越来越庞大。我国人口老龄化进程超前于经济社会发展，且老龄化问题与转型发展中的问题相互交织叠加，因而，我国面临的“银色挑战”更大，应对的任务更重。
                            </p>
                            <p class="text-muted">来源:中国新闻网</p>
                            <p class="text-muted hidden-xs">记者：田雅婷</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/pub_4.jpg" alt="">
                        </div>
                    </div>
                </div>
            </article>
            <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="upload/chinabg.png" alt="">
                </a>
                <a href="#" class="hot">
                    <span class="btn btn-primary">热搜</span>
                    <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                    <p class="text-muted">中国博客联盟是一个独立博客的收录,导航和聚合站点,并提供一个交流的平台,是一个非盈利性组织(ORG)，联盟成员完全平等、自由。</p>
                </a>
            </aside>
        </div>
    </div>
</body>

</html>